<template>
  <div class="pd-20 detectionItem">
    <el-select v-model="status"
               placeholder="请选择审核状态">
      <el-option v-for="item in statusList"
                 :key="item.value"
                 :label="item.label"
                 :value="item.value">
      </el-option>
    </el-select>
    <el-button type="primary"
               @click="getList">查 询</el-button>
    <element-table :columns="columns"
                   class="mt-20"
                   :data="tableData"
                   v-loading="loading"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:status="{row}">
        <el-tag type="danger"
                v-if="row.status === 0">审核不通过</el-tag>
        <el-tag type="success"
                v-if="row.status === 1">待审核</el-tag>
        <el-tag type="danger"
                v-if="row.status === 2">审核通过</el-tag>
      </template>
      <template v-slot:edit="{row}">
        <el-button type="primary"
                   @click="handleOption(row, 'verify')"
                   v-if="row.status === 1">去审核</el-button>
        <el-button type="danger"
                   @click="handleOption(row, 'detail')"
                   v-if="row.status === 0 || row.status === 2">查看详情</el-button>
      </template>
    </element-table>
    <detection-dialog :dataObj="dataObj"
                      v-if="isShow"
                      :visible.sync="isShow"></detection-dialog>
  </div>

</template>
<script>
  import elementTable from '@/base/ElementTable'
  import detectionDialog from './detectionDialog'
  export default {
    name: 'detectionItem', // 检测项赠送审核
    data () {
      return {
        loading: false,
        isShow: false,
        columns: [
          {
            label: '分店名称',
            prop: 'name',
          },
          {
            label: '会员姓名',
            prop: 'complications',
          },
          {
            label: '会员电话',
            prop: 'complications',
          },
          {
            label: '销售总额',
            prop: 'screeningItems',
          },
          {
            label: '参与主题',
            prop: 'item',
          },
          {
            label: '购药时间',
            prop: 'createTime',
            width: 200,
            formatter: (row, cellValue) => {
              return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
            }
          },
          {
            label: '审核状态',
            prop: 'status',
            width: 120,
            isSlot: true
          },
          {
            label: '操作',
            prop: 'edit',
            width: 120,
            isSlot: true
          }
        ],
        tableData: [],
        pageTotal: 0,
        pageIndex: 0,
        pageSize: 10,
        dataObj: {},
        status: 0,
        statusList: [
          { value: 0, label: '审核未通过' },
          { value: 1, label: '待审核' },
          { value: 2, label: '审核通过' }
        ]
      }
    },
    methods: {
      getList () {
        this.tableData = [
          { name: '检测项目名称', complications: '关联合并症', screeningItems: '推荐健康筛查项目', item: 13402870536, createTime: 1615245781245, status: 0 },
          { name: '检测项目名称', complications: '关联合并症', screeningItems: '推荐健康筛查项目', item: 13402870536, createTime: 1615245781245, status: 1 },
          { name: '检测项目名称', complications: '关联合并症', screeningItems: '推荐健康筛查项目', item: 13402870536, createTime: 1615245781245, status: 2 }
        ];
        this.pageTotal = this.tableData.length;
      },
      handleOption (row, op) {
        this.dataObj = Object.assign({}, row);
        this.isShow = true;
        /* switch (op) {
          case 'verify':
            break;
          case 'detail':
            this.dataObj = Object.assign({}, row);
            this.isShow = true;
            break;
        } */
      },
      // 分页
      handleChangePage (page) {
        this.pageIndex = page;
        this.getList();
      },
    },
    created () {
      this.getList();
    },
    components: {
      'element-table': elementTable,
      'detection-dialog': detectionDialog,
    }
  }
</script>
<style scoped lang="scss">
</style>